<template>
  <div class="home">
    <head-container></head-container>
    <div class="fullpage" ref="fullPage">
      <div class="content">
        <el-carousel class="banner_wrap page page1" id="home" indicator-position='none' height = '600' style="height:833px;">
          <el-carousel-item class="banner_item" v-for="item in banner" :key="item.id">
            <img :src="item.img_url" alt="">
          </el-carousel-item>
        </el-carousel>
        <section class="page page2"  style="height:833px;">
        </section>
        <section class="page page3" id="about" style="height:833px;">
        </section>
        <section class="page page4" style="height:833px;">
          <div class="w1200">
            <h2 class="expert_team">睿那顶尖专家团队</h2>
            <section class="expert_team_main clearfix">
              <div class="expert_team_item fl">
                <img src="../assets/images/8.png" alt="">
              </div>
              <div class="expert_team_item fl">
                <header>
                  <div class="name">李泽湘</div>
                  <div class="tip">人工智能导师</div>
                </header>
                <p>灵巧机械手的操作与控制领域的国际权威</p>
                <p>长期从事机器人与自动化教学和科研工作</p>
                <p>香港科技大学电子与计算机工程学系教授</p>
                <p>固高科技有限公司董事长,协助王涛创办大疆科技</p>
              </div>
              <div class="expert_team_item fl">
                <img src="../assets/images/10.png" alt="">
              </div>
              <div class="expert_team_item fl">
                <header>
                  <div class="name">龚睿那</div>
                  <div class="tip">世界冠军</div>
                </header>
                <p>羽毛球世界冠军,多次斩获国际赛事冠军</p>
                <p>于2003/2004年荣登女单世界排名第一</p>
                <p>青少年羽毛球运动教育专家国际级运动健将</p>
                <p>北京体育大学体育教育训练硕士</p>
                <p>美国威斯康星大学访问学者</p>
              </div>
              <div class="expert_team_item fl">
                <img src="../assets/images/9.png" alt="">
              </div>
              <div class="expert_team_item fl">
                <header>
                  <div class="name">张绍臣</div>
                  <div class="tip">国家高级教练员</div>
                </header>
                <p>国家级高级教练员</p>
                <p>国家体育总局羽毛球技术委员会专业培训师</p>
                <p>职业资格鉴定考试师</p>
                <p>曾任湖南省羽毛球队主教练</p>
                <p>中国国家青年队主教练</p>
                <p>培养了鲍春来,郑波,柴飚等世界冠军</p>
              </div>
            </section>
          </div>
        </section>
        <section class="page page5" id="sch">
          <h2>世界冠军进校园</h2>
          <div class="sco_main_tip">
            世界冠军龚睿那亲自开发的青少年羽毛球RNTS教学体系及其延伸教案、教材、视频。破解传统青少年羽毛球培训的三大痛点：
            不规范（无教案）| 不系统（无标准）| 不够针对性（无体系）为在校的中小学生提供最为专业和系统羽毛球运动启蒙和训练
            让青少年洗爱上羽毛球运动，并掌握出色的羽毛球运动技能
          </div>
          <div class="clearfix">
            <div class="sco_item sco_item1 fl">
              <div class="mask">
                <div class="mask_inner">
                  <div>校本课程</div>
                  <img src="../assets/images/25.png" alt="">
                  <div>羽毛球体育课</div>
                </div>
              </div>
            </div>
            <div class="sco_item sco_item2 fl">
              <div class="mask">
                <div class="mask_inner">
                  <div>校队训练</div>
                  <img src="../assets/images/26.png" alt="">
                  <div>羽毛球校队</div>
                </div>
              </div>
            </div>
            <div class="sco_item sco_item3 fl" style="margin-right:0">
              <div class="mask">
                <div class="mask_inner">
                  <div>四点半课程</div>
                  <img src="../assets/images/27.png" alt="">
                  <div>羽毛球羽毛球兴趣班</div>
                </div>
              </div>
            </div>
            <div class="sco_item sco_item4 fl">
              <div class="mask">
                <div class="mask_inner">
                  <div>老师训练</div>
                  <img src="../assets/images/28.png" alt="">
                  <div>老师训练班</div>
                </div>
              </div>
            </div>
            <div class="sco_item sco_item5 fl">
              <div class="mask">
                <div class="mask_inner">
                  <div>趣味活动</div>
                  <img src="../assets/images/29.png" alt="">
                  <div>羽毛球主题活动</div>
                </div>
              </div>
            </div>
            <div class="sco_item sco_item6 fl" style="margin-right:0">
              <div class="mask">
                <div class="mask_inner">
                  <div>儿童启蒙</div>
                  <img src="../assets/images/30.png" alt="">
                  <div>启蒙趣味运动会</div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section class="page page6" id="match">
          <div class="w1200">
            <div class="champion_wrap">
              <h2>
                <p>"冠军联盟杯"</p>
                <p>全国青少年&亲子羽毛球巡回赛</p>
              </h2>
              <p>“冠军联盟杯”全国青少年羽毛球巡回赛是由龚睿那、张亚雯、蔡赟携手组建的“冠军联盟”发起，
                三位世界冠军亲身创办并参与赛事，旨在为青少年提供全国最顶级的羽毛球巡回赛事，
                并将该赛事打造成亚洲最高水平的青少年&亲子羽毛球比赛。“冠军联盟杯”的每个分站赛都会有比赛积分，
                最终将根据各站赛事的积分情况进行最终的总决赛。</p>
                <section class="champion_mens clearfix">
                  <div class="gong men fl">
                    <img src="../assets/images/18.png" alt="">
                    <p>龚睿那</p>
                    <p>世界冠军</p>
                  </div>
                  <div class="cai men fl">
                    <img src="../assets/images/19.png" alt="">
                    <p>蔡赟</p>
                    <p>世界冠军</p>
                  </div>
                  <div class="zhang men fl">
                    <img src="../assets/images/20.png" alt="">
                    <p>张亚雯</p>
                    <p>世界冠军</p>
                  </div>
                </section>
            </div>
          </div>
        </section>
        <section class="page page7">
          <header class="w1200">
            <h2>羽毛球冬夏令营</h2>
            <p>睿那体育在寒暑假期间为青少年提供</p>
            <p>连续系统的羽毛球在校集训和以观光和人文体验相结合的游学冬夏令营</p>
            <p>提升羽毛球专业运动技能，培养青少年对羽毛球的运动热情与更多元的文化视野</p>
          </header>
          <div class="camp_wrap clearfix">
            <div class="camp fl">
              <img src="../assets/images/21.png" alt="">
              <div>
                <h6>寒暑假在校集训</h6>
                <p>在寒暑假期间为青少年提供连续的系统的羽毛球培训，提高青少年的羽毛球转向运动水平和体能质</p>
              </div>
            </div>
            <div class="camp fl">
              <img src="../assets/images/22.png" alt="">
              <div>
                <h6>国际羽毛球游学</h6>
                <p>计划开通两条国际游学线路，采用观光和人文体验相结合的游学活动，培养青少年对羽毛球的运动热情与更多元的文化视野</p>
              </div>
            </div>
            <div class="camp fl" style="margin-right:0;">
              <img src="../assets/images/23.png" alt="">
              <div>
                <h6>国内羽毛球游学</h6>
                <p>计划开通三条国内游学线路，采用观光和人文体验相结合的游学活动，培养青少年对羽毛球的运动热情和对未来的向往</p>
              </div>
            </div>
          </div>
        </section>
        <section class="page page8" id="platform">
          <div class="mask"></div>
          <div class="w1200 study_admin">
            <header>
              <h2>羽学堂智慧O2O教学平台</h2>
              <div>羽学堂O2O平台是行业内第一个集成线上线下教学的综合智慧信息平台，随时随地享受羽动之乐</div>
            </header>
            <div class="platform_wrap clearfix">
              <div class="plantform_item fl">
                <header>
                  <h3>数据化</h3>
                  <div>教学呈现</div>
                </header>
                <p>学生基本信息，课程目标分解，线上课程计划，线上课程完成度，线下课程预约，线下课程效果评价，阶段性评测分数与训练效能</p>
              </div>
              <div class="plantform_item fl">
                <header>
                  <h3>体系化</h3>
                  <div>O2O课程</div>
                </header>
                <p>原创RNTS教学体系配套丰富的O2O课程，每一个星级对应能力指标，匹配充盈的学习素材，告别网上盲学，随时随地学习羽毛球</p>
              </div>
              <div class="plantform_item fl">
                <header>
                  <h3>智能化</h3>
                  <div>学习体验</div>
                </header>
                <p>运用人工智能技术结合世界冠军标准技术动作，开发“AI羽毛球动作纠正仪”，对着人工智能老师练球，可判断动作是否标准，创新羽毛球教学体验</p>
              </div>
              <div class="plantform_item fl" style="margin-right:0;">
                <header>
                  <h3>标准化</h3>
                  <div>接口管理</div>
                </header>
                <p>所有学生与教练都接入平台，以学生数据可标准化管理教练教学，如教练该于何时何地上何种内容，教案自动生成，教完考核指标</p>
              </div>
            </div>
          </div>
        </section>
        <section class="w1200 rnts_news">
          <header>
            <h2>睿那新闻</h2>
            <span class="hline"></span>
            <div>RNTS NEWS</div>
          </header>
          <div class="news_wrap clearfix">
            <div class="news_item fl" @click="goToNews(item.id)" v-for="item in newsList" :key="item.id">
              <img :src="item.banner_url" alt="">
              <div class="tip">
                <span class="news_title">{{item.title}}</span>
                <span>{{"发布于"+GLOBAL.timestampToTime(item.created_at)}}</span>
              </div>
            </div>
          </div>
        </section>
        <section class="venues">
          <div class="w1200 venues_wrap">
            <div class="venues_left">
              <div>我们的场馆</div>
              <div class="addr">上海/长沙</div>
            </div>
            <div class="venues_right">
              <ul class="clearfix">
                <li class="fl">
                  <div class="title"><span>上海</span><span>美再晨汤臣店</span></div>
                  <p>地址：浦东新区松涛路251-1号</p>
                  <p>电话：021-50800733</p>
                </li>
                <li class="fl">
                  <div class="title"><span>上海</span><span>美再晨汤臣店</span></div>
                  <p>地址：浦东新区松涛路251-1号</p>
                  <p>电话：021-50800733</p>
                </li>
                <li class="fl">
                  <div class="title"><span>上海</span><span>美再晨汤臣店</span></div>
                  <p>地址：浦东新区松涛路251-1号</p>
                  <p>电话：021-50800733</p>
                </li>
                <li class="fl">
                  <div class="title"><span>上海</span><span>美再晨汤臣店</span></div>
                  <p>地址：浦东新区松涛路251-1号</p>
                  <p>电话：021-50800733</p>
                </li>
                <li class="fl">
                  <div class="title"><span>上海</span><span>美再晨汤臣店</span></div>
                  <p>地址：浦东新区松涛路251-1号</p>
                  <p>电话：021-50800733</p>
                </li>
                <li class="fl">
                  <div class="title"><span>上海</span><span>美再晨汤臣店</span></div>
                  <p>地址：浦东新区松涛路251-1号</p>
                  <p>电话：021-50800733</p>
                </li>
                <li class="fl">
                  <div class="title"><span>上海</span><span>美再晨汤臣店</span></div>
                  <p>地址：浦东新区松涛路251-1号</p>
                  <p>电话：021-50800733</p>
                </li>
              </ul>
            </div>
          </div>
        </section>
        <section class="partner w1200">
          <h2>睿那合作伙伴</h2>
        </section>
        <footer class="foot">
          <div class="w1200">
            <header>
              <h2>联系我们</h2>
              <div>CONTACT US</div>
            </header>
            <div class="foot_main">
              <ul class="clearfix">
                <li class="fl">
                  <div class="title">广东睿那体育教育科技有限公司</div>
                  <p>地址：浦东新区松涛路251-1号</p>
                  <p>电话：021-50800733</p>
                </li>
                <li class="fl">
                  <div class="title">广东睿那体育教育科技有限公司</div>
                  <p>地址：浦东新区松涛路251-1号</p>
                  <p>电话：021-50800733</p>
                </li>
                <li class="fl">
                  <div class="title">广东睿那体育教育科技有限公司</div>
                  <p>地址：浦东新区松涛路251-1号</p>
                  <p>电话：021-50800733</p>
                </li>
                <li class="fl">
                  <div class="title">广东睿那体育教育科技有限公司</div>
                  <p>地址：浦东新区松涛路251-1号</p>
                  <p>电话：021-50800733</p>
                </li>
              </ul>
            </div>
          </div>
        </footer>
      </div>
    </div>
  </div>
</template>
<script>
import headContainer from '../components/headContainer'
export default {
  name: "Home",
  components: {
    headContainer,
  },
  data() {
    return {
      banner: [],
      styleTop:0,
      newsList: [],
      scroll:null,
      p:this.$route.path.slice(1)
    }
  },
  watch:{
    '$route' (to, from) {
      this.p = this.$route.path.slice(1)
      this.goToPos(this.p)
    }
  },
  methods:{
    goToNews(id){
      this.$router.push({path:'/new',query:{id}})
    },
    getStatus (urlStr) {
      if(urlStr == undefined){
        return 0
      }
      var urlStrArr = urlStr.split('/')
      return Number(urlStrArr[urlStrArr.length - 1])
    },
    goToPos(selector,is){
      if (selector=='') {
        selector = 'home'
      }
      selector = '#'+selector;
      var anchor = this.$el.querySelector(selector)
      document.body.scrollTop = is?anchor.offsetTop-116:anchor.offsetTop; // chrome
      document.documentElement.scrollTop = is?anchor.offsetTop-116:anchor.offsetTop; // firefox
    }
  },
  mounted() {
    this.goToPos(this.p,1)
    this.GLOBAL.request({
      baseURL: this.GLOBAL.API_RNTY_URL,
      url: "mainbanner"
    }).then(({ data: data }) => this.banner = data);
    this.GLOBAL.request({
      baseURL: this.GLOBAL.API_RNTY_URL,
      url: "trends/list",
      param:{
        page: 0,
        total: 3,
      }
    }).then(({ data: data }) => this.newsList = data.data);
  }
};
</script>
<style>
.fl{
  float: left;
}
.clearfix:after{
  content:'';
  display: block;
  clear: both;
}
.w1200{
  width:1200px;
  height:100%;
  margin:0 auto;
}
.fullpage{
  /* position: absolute;
  left: 0;
  top: 0; */
  width: 100%;
  height: 100%;
  padding-top: 116px;
  box-sizing: border-box;
}
.home{
  height:100%;
}
.page,.banner_wrap .el-carousel__container,is_active,.banner_item,.banner_item img{
  height:100%;
  width: 100%;
}
.bg2{
  width:100%;
  height:100%;
}
.page2{
  background:url('../assets/images/bg2.png') no-repeat;
  background-size:100% 100%; 
}
.page3{
  background:url('../assets/images/bg1.png') no-repeat;
  background-size:100% 100%; 
}
.page4{
  background-color: #f6f6f6;
}
.page5{
  width:1200px;
  margin:0 auto;
}
.page5 h2{
  font:34px/88px "微软雅黑";
  color:#0f4c85;
  text-align: center;
  margin-top:19px;
}
.page6{
  padding-top:33px;
  box-sizing: border-box; 
  background: url('../assets/images/17.png') 0 33px no-repeat #fafafa;
}
.page7{
  background: url('../assets/images/31.png') 0 608px no-repeat;
}
.page7 header{
  height:262px;
  text-align: center;
}
.page7 header h2{
  padding-top:39px;
  font:42px/74px "微软雅黑";
  font-weight: bold;
  color:#0f4c85;
}
.page7 header p{
  font: 18px/36px "微软雅黑";
  color:#666;
}
.page8{
  background: url('../assets/images/24.png') no-repeat ;
  background-size: 100% 833px;
  position: relative;
  overflow: hidden;
}
.page8 .mask{
  width:100%;
  height:833px;
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
  background-color: rgba(234,244,246,0.5);
}
.study_admin{
  position: relative;
  z-index: 2;
}
.page8 header{
  text-align: center;
  font:16px/36px "微软雅黑";
  color:#666;
}
.page8 h2{
  font:38px/70px "微软雅黑";
  padding-top: 29px;
  color:#0f4c85;
  font-weight: bold;
  -webkit-text-stroke: 1px #fff;
}
.sco_main_tip{
  width:900px;
  margin:0 auto 40px;
  font:18px/34px "微软雅黑";
  color:#7cc0ff;
  text-indent: 54px;
}
.sco_item{
  width: 380px;
  height:245px;
  background: url('../assets/images/15.png') 0 0 no-repeat;
  background-size: 380px 245px;
  position: relative;
  margin-right: 30px;
  margin-bottom: 30px;
}
.sco_item2{
  background: url('../assets/images/12.png') 0 0 no-repeat;
}
.sco_item3{
  background: url('../assets/images/13.png') 0 0 no-repeat;
}
.sco_item4{
  background: url('../assets/images/14.png') 0 0 no-repeat;
}
.sco_item5{
  background: url('../assets/images/11.png') 0 0 no-repeat;
}
.sco_item6{
  background: url('../assets/images/16.png') 0 0 no-repeat;
}
.sco_item .mask{
  position: absolute;
  top:0;
  left:0;
  width:380px;
  height:245px;
  background-color: rgba(255, 255, 255, .9)
}
.mask_inner{
  width:356px;
  height:221px;
  margin:12px auto;
  text-align: center;
  padding-top: 13px;
  box-sizing: border-box;
  border:1px solid #e39764;
}
.mask_inner div{
  font:24px/60px "微软雅黑";
  color:#b59370;
}
.main_busine{
  height:100%;
  width:1200px;
  margin:0 auto;
}
.main_busine h2{
  color:#0f4c85;
  width: 300px;
  margin: 54px auto 0;
  text-align: center;
  font:36px/68px "微软雅黑";
  padding-top: 30px;
  background:url('../assets/images/main_busine.png') no-repeat 0 0;
}
.expert_team{
  width:480px;
  height:14.8859543817527%;
  margin:0 auto;
  text-align: center;
  font:30px/72px "微软雅黑";
  color:#666666;
  background:url('../assets/images/expert_team.png') no-repeat;
}
.expert_team_main{
  height:85.1140456182473%;
  /* border:1px solid #e39764; */
  box-sizing: border-box;
  text-align: center;
}
.expert_team_item{
  width:400px;
  height:42.55702280912365%;
}
.expert_team_item img{
  width:100%;
  height:100%;
}
.expert_team_item header div{
  font-family: "微软雅黑";
  color:#e39764;
}
.expert_team_item .name{
  margin-top: 45px;
  font-size:34px;
  line-height: 55px;
}
.expert_team_item .tip{
  font-size: 18px;
  line-height: 39px;
}
.expert_team_item p{
  font:14px/24px "微软雅黑";
  color:#666;
}
.champion_wrap{
  width:616px;
  height:800px;
  margin-left:584px;
  background-color: #fafafa;
}
.champion_wrap h2{
  padding-top:58px;
  margin-bottom: 40px;
  text-align: center;
}
.champion_wrap h2 p{
  font:34px/58px "微软雅黑";
  color:#0f4c85;
  font-weight: bold;
}
.champion_wrap p{
  text-indent: 36px;
  font:18px/36px "微软雅黑";
  color:#e39764;
  width:540px;
  margin: 0 auto;
}
.champion_mens .men p {
  text-indent: 0;
  text-align: center;
  width:205px;
}
.champion_mens .men img{
  padding:35px 20px;
}
.camp_wrap{
  width:1200px;
  margin: 0 auto;
}
.camp{
  width:360px;
  height:523px;
  margin-right: 60px;
  background-color: #fff;
}
.camp h6{
  font:24px/62px "微软雅黑";
  color:#333;
  text-align: center;
  margin-top:10px;
}
.camp p{
  font:18px/36px "微软雅黑";
  color:#666;
  padding:0 42px;
  text-indent: 18px;
}
.platform_wrap{
  margin-top:43px;
}
.plantform_item{
  width:270px;
  height:600px;
  padding:40px;
  margin-right: 40px;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.plantform_item header{
  padding:15px 0 20px 0;
  color:#e39764;
}
.plantform_item header h3{
  font:28px/48px "微软雅黑";
}
.plantform_item header div{
  font:18px/30px "微软雅黑";
}
.plantform_item p{
  font:18px/36px "微软雅黑";
  color:#666;
  text-indent: 18px;
}
.rnts_news{
  height:404px;
}
.rnts_news header{
  font: 18px/30px "微软雅黑";
  color:#0f4c85;
  text-align: center;
  margin-top:62px;
}
.rnts_news .hline{
  width:36px;
  height:2px;
  display: block;
  margin:5px auto;
  background-color: #e39764;
}
.news_item{
  width:400px;
  height:250px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.news_item img{
  width:100%;
  height:100%;
}
.news_item .tip{
  width:380px;
  height:50px;
  background-color: rgba(177, 179, 250, 0.5);
  position: absolute;
  bottom: 10px;
  left: 10px;
  color:#fff;
  padding: 2px 5px;
  box-sizing: border-box;
  display: flex;
  font:14px/48px "微软雅黑";
  justify-content: space-between;
}
.news_item .news_title{
  width:180px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.venues{
  height:564px;
  background: url('../assets/images/bg3.png') no-repeat;
  background-size: 100% 564px;
}
.venues_wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.venues_left{
  width:420px;
  font:36px/66px "微软雅黑";
  color:#00305b;
  text-align: center;
}
.venues_left .addr{
  font-size:48px;
}
.venues_right{
  width:780px;
  display: flex;
}
.venues_right li{
  width:385px;
  padding-left:42px;
  box-sizing: border-box;
  margin-bottom: 26px;
  position: relative;
}
.venues_right .title::after{
  position: absolute;
  content: '';
  display: block;
  top:10px;
  left:15px;
  width:15px;
  height:15px;
  background-color: #7cc0ff;
}
.venues_right .title span{
  display: inline-block;
  margin-right: 20px;
  font:bold 18px/34px "微软雅黑";
  color:#00305b;
  margin-bottom: 5px;
}
.venues_right p{
  font:bold 14px/20px "微软雅黑";
  color:#0f4c85;
}
.partner{
  height:730px;
  background: url('../assets/images/partner.png') 0 160px no-repeat;
}
.partner h2{
  text-align: center;
  font: 36px/160px "微软雅黑";
  color:#666666;
  margin-top:40px;
}
.foot{
  height:320px;
  color:#fff;
  padding-top: 15px;
  box-sizing: border-box;
  background-color: #3c7cff;
}
.foot_main{
  background: url('../assets/images/wx.png') 860px 0 no-repeat;
}
.foot_main ul{
  width:890px;
}
.foot_main li{
  width:400px;
  margin-top:20px;
  padding-left:20px;
  box-sizing: border-box;
  position: relative;
}
.foot_main li::after{
  content: url('../assets/images/posi.png');
  position: absolute;
  top:10px;
  left:0px;
  width:16px;
  height:20px;
}
.foot_main .title{
  font: 18px/40px "微软雅黑";
}
</style>

